<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步-数据请求</title>
</head>
<body>
    <ul id="posts"></ul>
    <script>
        // 如何由异步变同步
        let posts=[];
        let users=[];

        // 封装dry
        function ajax(url,cb){
            const xhr=new XMLHttpRequest();
            xhr.open("GET",url,true);
            xhr.send();
            xhr.addEventListener('readystatechange',function(event){
                if(event.target.readyState===4){
                    let  data =JSON.parse(event.target.responseText);
                    console.log(data);
                    // 嵌套
                    cb();
                }
            });
        }
        // 使用回调函数技巧 实现异步任务嵌套 异步任务同步化 控制代码的执行流程
        ajax("http://localhost:3000/posts",()=>{
            ajax("http://localhost:3001/users",()=>{
                console.log('the work is over');
            });
        });


        // fetch('http://127.0.0.1:3000/posts')
        //     // 拿到二进制文件流
        //     .then(data => data.json())//数据json化
        //     .then(data => {
        //         posts=[...data];//扩展运算符 进行解构
        //         // console.log(data);
        //         fetch('http://127.0.0.1:3001/users')
        //             // 拿到二进制文件流
        //             .then(data => data.json())//数据json化
        //             .then(data => {
        //                 users=[...data];
        //                 // console.log(data);
        //                 console.log(posts,users,'------------')
        //             })
        //     })
        
        // fetch('http://127.0.0.1:3001/users')
        //     // 拿到二进制文件流
        //     .then(data => data.json())//数据json化
        //     .then(data => {
        //         console.log(data);
        //     })


        // // 前端拉取数据API xhrduix
        // const xhr=new XMLHttpRequest();
        // xhr.open("GET","http://127.0.0.1:3000/posts",true);
        // xhr.send();//发送请求
        // // http 请求响应式
        // xhr.addEventListener('readystatechange',function(event){
        //     console.log(event);
        //     if(event.target.readyState===4){//表示数据全部到达本地
        //         // console.log(event.target.responseText);
        //         document.getElementById("posts").innerHTML +=
        //             //JSON parse
        //             JSON.parse(event.target.responseText).map(item=>
        //             `
        //             <li>
        //                 ${item.id} ${item.title} ${item.author}    
        //             </li>
        //             `).join("");
        //     }
        // });

        // fetch('http://127.0.0.1:3000/posts')
        //     // 拿到二进制文件流
        //     .then(data => data.json())//数据json化
        //     .then(data => {
        //         console.log(data);
        //     })
    </script>
</body>
</html>